<template>
<div>
    <!--外边灰框-->
    <div style="width: 1300px;margin:0 auto;background-color: whitesmoke;border: 1px; padding: 40px;border-radius: 20px;">
        <!--面包屑-->
        <el-row style="height:40px">
            <el-breadcrumb separator="/" style="margin-left: 10px">
                <el-breadcrumb-item :to="{ path: '/' }"><a href="/home">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item>查疫苗</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <!--一类疫苗-->
        <!-- 疫苗列表 -->
        <el-card v-for="(itemList, index) in vaccineLists" :key="index" style="margin-bottom: 30px;border-radius: 10px">
            <p class="div_p" style="position: absolute;z-index: 1;font-size: 30px">
                <span style="font-weight: bold;">{{ itemList.title }}</span>
                <span style="margin-left: 10px;font: 15px '微软雅黑 Light'">{{ itemList.description }}</span>
            </p>
            <img :src="`/img/vaccine_${index + 1}.png`" style="width:100%" />
            <div style="padding-left: 40px;margin-top:0">
                <div style="padding-top: 20px">
                    <div style="height: 100px">
                        <ul>
                            <li v-for="item in itemList.items" :key="item.id" class="div_li">
                                <a class="vaccine_name" :href="'/vaccineDetail?vaccineId='+item.id">{{ item.name }}</a>
                            </li>
                        </ul>
                        <br />
                    </div>
                </div>
            </div>
        </el-card>

        <!--板块结束-->
    </div>


</div>
</template>
<style>
/*头部第一行*/
.a{
    text-decoration: none;
    color: #4a4a4a;
}

.vaccine_name{
    color: #333333;
}
.vaccine_name:visited {
  color:#4a4a4a;
}

.vaccine_name:hover {
  color: #8CDADB;
}

/*整体*/
body{
    margin: 0 auto;
    padding: 0;
}

/*主题样式*/
body{
    margin: 0 auto;
    padding: 0;
}

.div_li{
    float: left;
    margin-right: 100px;
    margin-bottom: 20px;
    font: 15px "微软雅黑 Light";
}
p{
    font: 18px "微软雅黑";
}
.div_p{
    color: white;
    margin:70px 30px
}
.el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 2px solid #00cb8e;
    color: #00cb8e;
}
.el-card div{
    padding: 0;
}
</style>
<script>
import axios from "axios";
import BaseUrl from "@/http/BaseUrl";

export default {
    data(){
        return{
            item:'',
            activeTab: "2",
            vaccineLists: [
                {title:'一类疫苗',description:'免费接种',items: []},
                {title:'二类疫苗',description:'自费、自愿接种',items: []},
                {title:'三类疫苗',description:'使机体获得立即、短暂的免疫力',items: []}
            ]
        }
    },
    methods: {
        loadVaccineList(vaccineType) {
                let url =BaseUrl.INDEX+ `/vaccine/vaccineList/${vaccineType}`;
                this.axios.get(url).then(response => {
                        this.vaccineLists[vaccineType - 1].items = response.data.data;
                    })
            }
    },
    created() {
        this.loadVaccineList(1);
        this.loadVaccineList(2);
        this.loadVaccineList(3);
    },
    mounted() {
    }
}
</script>